<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
    <style>
        #createCode {
            user-select: none;
        }

        .right {
            color: green;
            font-size: 12px;
        }

        .error {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!-- -->
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <!-- <p>
            <label for="">确&emsp;认:</label>
            <input type="text" class="repwd">
            <span class="repwd_span"></span>
        </p> -->
        <p>
            <label for="">手机号:</label>
            <input type="text" class="phone">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" class="email">
            <span class="email_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </div>
</body>
<script>
    // 1.  验证 用户名 密码 手机号 邮箱   => 失焦时验证
    // 用户名 => 整体
    //          拆开写     1. 6-12位  2. 以非数字开头   3. 由数字 字母 下划线 $组成
    // 2.  用户名 密码 手机号 邮箱  => 全都成功 => 点击注册 才能提交(alert("可以注册"))

    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];

    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phone_span")[0];

    var emailInp = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("email_span")[0];

    var btn = document.getElementsByClassName("btn")[0];

    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;



    userInp.onblur = function () {
        isUserOk = false;
        var user = userInp.value.trim();
        var lenReg = /^\S{6,12}$/;  //任意字符6-12
        var startReg = /^[^0-9]/; // 非数字开头
        var combReg = /^[\w$]{6,12}$/  // 合法组成

        if (!lenReg.test(user)) {  // 长度不符合规则  !lenReg.test(user) ==true  =>  lenReg.test(user)==false
            userSpan.textContent = "用户名需要在6-12位之间";
            userSpan.className = "user_span error";
        } else if (!startReg.test(user)) { // 开头不符合规则
            userSpan.textContent = "用户名不能以数字开头";
            userSpan.className = "user_span error";
        } else if (!combReg.test(user)) {  // 组成不符合规则
            userSpan.textContent = "用户名仅支持字母、数字、下划线和$";
            userSpan.className = "user_span error";
        } else {
            // 用户名格式全都正确的前提下判断用户有没有注册?
            if (!getAllUser().includes(user)) {
                userSpan.textContent = "√";
                userSpan.className = "user_span right";
                isUserOk = true;
            } else {
                userSpan.textContent = "用户名已注册";
                userSpan.className = "user_span error";
            }
        }


    }


    // 一步到位
    pwdInp.onblur = function () {
        isPwdOk = false;
        var pwd = pwdInp.value.trim();
        var reg = /^[\w$]{6,12}$/;

        if (reg.test(pwd)) {

            var isExistNum = /[0-9]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSpe = /[_$]/.test(pwd);

            var level = isExistNum + isExistSmall + isExistBig + isExistSpe;
            pwdSpan.textContent = "密码强度:" + level;
            pwdSpan.className = "pwd_span right";
            isPwdOk = true;
        } else {
            pwdSpan.textContent = "密码仅支持字母、数字、下划线和$,6-12位";
            pwdSpan.className = "pwd_span error";
        }

    }



    phoneInp.onblur = function () {
        isPhoneOk = false;
        var phone = phoneInp.value.trim();
        var reg = /^1[3-9]\d{9}$/;

        if (reg.test(phone)) {

            // 手机号格式全都正确的前提下判断当前手机有没有注册?
            if (!getAllPhone().includes(phone)) { // 不存在
                phoneSpan.textContent = "√";
                phoneSpan.className = "phone_span right";
                isPhoneOk = true;
            } else {
                phoneSpan.textContent = "手机号已被注册!";
                phoneSpan.className = "phone_span error";
            }
        } else {
            phoneSpan.textContent = "请输入正确的手机号!";
            phoneSpan.className = "phone_span error";
        }
    }


    emailInp.onblur = function () {
        isEmailOk = false;
        var email = emailInp.value.trim();
        var reg = /^\w+@\w+\.(com|cn|email)$/;

        if (reg.test(email)) {

            // 手机号格式全都正确的前提下判断当前手机有没有注册?

            if (!getAllEmail().includes(email)) { // 不存在
                emailSpan.textContent = "√";
                emailSpan.className = "email_span right";
                isEmailOk = true;
            } else {
                emailSpan.textContent = "邮箱已被注册!";
                emailSpan.className = "email_span error";
            }
        } else {
            emailSpan.textContent = "邮箱格式有误!";
            emailSpan.className = "email_span error";
        }
    }
    var count = 0;

    btn.onclick = function () {
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
            // cookie默认数据库 存储数据

            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;

            // 单用户注册  => 键名相同 => 注册第二个会覆盖第一个  
            // setCookie("user", user, 7);
            // setCookie("pwd", pwd, 7);
            // setCookie("phone", phone, 7);
            // setCookie("email", email, 7);


            // 多用户注册 需要解决的问题 => 键名不能重复的情况下存储数据到cookie

            // (1) 注册时进行计数 => 1. 刷新页面count重新计数  2. 键名通过编号计数,无法直观的将数据和某个用户对应起来
            // user_1  pwd_1  phone_1 email_1
            // user_2  pwd_2  phone_2 email_2

            // count++;
            // setCookie("user_" + count, user, 7);
            // setCookie("pwd_" + count, pwd, 7);
            // setCookie("phone_" + count, phone, 7);
            // setCookie("email_" + count, email, 7);


            // (2) 用户名作为键名的后缀
            // user_a123132  pwd_a123132  phone_a123132 email_a123132
            // user_b123123  pwd_b123123  phone_b123123 email_b123123

            setCookie("user_" + user, user, 7);
            setCookie("pwd_" + user, pwd, 7);
            setCookie("phone_" + user, phone, 7);
            setCookie("email_" + user, email, 7);

            location.href = "./login.html";

        }
    }



    // 对应键名获取cookie
    function getAllUser() { // 传入的键名
        var cookie = document.cookie;
        var arr = [];
        if (cookie) {
            var list = cookie.split("; ");
            for (var i = 0; i < list.length; i++) {
                var item = list[i];  // 'user=a123123', 'pwd=123123'
                var name = item.split("=")[0]; //解析的键名
                var val = item.split("=")[1];
                if (name.startsWith("user_")) {
                    arr.push(val);
                }
            }

        }
        return arr;
    }

    function getAllPhone() { // 传入的键名
        var cookie = document.cookie;
        var arr = [];
        if (cookie) {
            var list = cookie.split("; ");
            for (var i = 0; i < list.length; i++) {
                var item = list[i];  // 'user=a123123', 'pwd=123123'
                var name = item.split("=")[0]; //解析的键名
                var val = item.split("=")[1];
                if (name.startsWith("phone_")) {
                    arr.push(val);
                }
            }

        }
        return arr;
    }

    function getAllEmail() { // 传入的键名
        var cookie = document.cookie;
        var arr = [];
        if (cookie) {
            var list = cookie.split("; ");
            for (var i = 0; i < list.length; i++) {
                var item = list[i];  // 'user=a123123', 'pwd=123123'
                var name = item.split("=")[0]; //解析的键名
                var val = item.split("=")[1];
                if (name.startsWith("email_")) {
                    arr.push(val);
                }
            }

        }
        return arr;
    }




</script>

</html>